<template>
    <div style="height: 100%;">
      <el-container>
        <el-header>
          <el-button @click="cancel">取消</el-button>
        </el-header>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="标题" prop="title">
            <el-col :span="15">
              <el-input v-model="form.title"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="分类" prop="classification">
            <el-col :span="15">
              <el-input v-model="form.classification"></el-input>
            </el-col>
          </el-form-item>
          <el-main style="height: 630px; display: flex; align-items: stretch">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.text"
              class="textarea-input"
            />
          </el-main>
        </el-form>
        <el-footer style="justify-content:flex-end" size="medium">
          <el-button @click="confirm">确定</el-button>
        </el-footer>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    name: "TextEdit",
    data() {
      return {
        id:"",
        form: {
          title: "",
          classification: "",
          text: ""
        },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          classification: [
            { required: true, message: '请输入分类', trigger: 'blur' }
          ]
        }
      };
    },
    mounted() {
        this.id = this.$route.params.announcementId;
      },
    methods: {
      
      cancel() {
        this.$router.push('/MessageMange');
      },
      confirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 确定逻辑，比如发送请求保存数据
            this.$refs.form.validate((valid) => {
            if (valid) {
              console.log(this.id)
              this.$axios.put('http://localhost:8082/announcement/'+this.id, this.form).then(res => res.data).then(res => {
                console.log(res);
                if (res.code == 200) {
                  this.$message({
                    message: '编辑成功'
                  });
                } else {
                  this.$message({
                    message: '编辑失败'
                  });
                }
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
            this.$router.push('/MessageMange');
          } else {
            console.log('表单验证失败');
            return false;
          }
        });
      },
    }
  };
  </script>
  
  <style scoped>
  .el-header, .el-footer {
    width: 100%;
    height: 50px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 修改为 flex-start 以使按钮靠左 */
  }
  
  .textarea-input {
    width: 100%;
    border: 1px solid black;
    resize: none; /* 防止用户拖动改变文本框大小 */
  }
  </style>
  